<template>
    <div>
        <el-form :model="form" label-width="120px" ref="form">
            <el-form-item label="用户">
                <el-input placeholder="请输入用户" style="width: 500px" :disabled="true" v-model="name"></el-input>
            </el-form-item>
            <el-form-item label="合集名称">
                <el-input placeholder="请输入合集名称" style="width: 500px" v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="合集描述">
                <el-input placeholder="请输入合集描述" style="width: 500px" v-model="form.desc"></el-input>
            </el-form-item>

            <el-form-item label="合集集数">
                <el-input placeholder="请输入合集集数" style="width: 500px" type="number" v-model="form.episodes"></el-input>
            </el-form-item>

            <el-form-item label="主要演员">
                <el-input placeholder="请输入主要演员" style="width: 500px" v-model="form.actor"></el-input>
            </el-form-item>

            <el-form-item label="标签(非必传)">
                <el-tag :key="tag" v-for="tag in form.labels" closable :disable-transitions="false"
                    @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>
                <el-input class="input-new-tag" v-if="inputVisible" style="width: 200px" v-model="inputValue"
                    ref="saveTagInput" size="small" placeholder="回车提交" @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm">
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
            </el-form-item>



            <el-form-item label="合集封面图">
                <medium v-model="form.thumbnail"></medium>
            </el-form-item>


            <!-- <el-form-item label="修改前分类" v-if="type == 'update'">
                <el-tag :key="index" v-for="(item, index) in categorysList" :disable-transitions="false"
                    style="margin-right: 10px;">
                    {{ item.name }}
                </el-tag>
            </el-form-item> -->


            <!-- <el-form-item label="选择分类">
                <el-cascader :options="options" v-model="ss" :props="props" clearable placeholder="请选择作品分类"
                    style="width: 500px" @change="category_idFun"></el-cascader>
            </el-form-item> -->


            <!-- <el-form-item label="选择分类">
                <el-cascader :options="options" :props="props" clearable placeholder="请选择作品分类" style="width: 500px"
                    @change="category_idFun"></el-cascader>
            </el-form-item> -->
            <el-form-item label="所属频道" prop="belong">
                <div class="width-350">
                    <el-select @change="chooseBelong" @clear="ruleForm.belong = null" clearable placeholder="请选择所属频道"
                        size="small" v-model="ruleForm.belong">
                        <el-option :key="index" :label="item.name" :value="index"
                            v-for="(item, index) in options"></el-option>
                    </el-select>
                </div>
            </el-form-item>

            <template v-if="ruleForm.belong != null">
                <el-form-item :key="index" :label="'所属' + item.name" :prop="'belong' + index"
                    v-for="(item, index) in options[ruleForm.belong].childrens">
                    <div class="width-350">
                        <el-select :placeholder="'请选择所属' + item.name" @clear="ruleForm['belong' + index] = null" clearable
                            size="small" v-model="ruleForm['belong' + index]" @change="chooseFun($event,index)">
                            <el-option :key="key" :label="value.name" :value="value.id"
                                v-for="(value, key) in item.childrens"></el-option>
                        </el-select>
                    </div>
                </el-form-item>
            </template>

            <el-form-item>
                <el-button type="primary" style="width: 470px; margin: 30px auto" @click="submit"
                    :loading="submitComplete">{{ type == 'create' ? '创建合集' : '修改合集' }}</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>
    
<script>
import medium from "@/components/medium/index";
export default {
    components: {
        medium,
    },
    computed: {

    },
    data() {
        return {
            form: {
                name: "",
                desc: "",
                thumbnail: "",
                episodes: "", //集数
                actor: "",
                labels: [], //"标签 (不必传)"
                categorys: [] //分类数组

            },
            ruleForm: {
                name: '',
                thumbnail: '',
                belong: null,
                belong0: null,
                belong1: null,
                belong2: null,
                episodes: null,
                desc: '',
                labels: [],
                categorys: [],
            },
            dynamicTags: ['标签一', '标签二', '标签三'],
            inputVisible: false,
            inputValue: '',
            options: [],
            categorysList: [],
            props: { multiple: true, children: 'childrens', value: 'id', label: 'name', checkStrictly: true },
            submitComplete: false,
            name: '',
            type: 'create'

        };
    },
    mounted() {
        this.getworksList()
        if (this.$route.query.user_id) {
            this.getUserList(this.$route.query.user_id);
        }
        if (this.$route.query.type) {
            this.type = this.$route.query.type
            this.getDetails(this.$route.query.id)
        }
    },
    methods: {

        initForm() {
            this.form = {
                user_id: "",
                name: "",
                desc: "",
                thumbnail: "",
                episodes: "", //集数
                actor: "",
                labels: [], //"标签 (不必传)"
                categorys: [] //分类数组

            }
        },
        handleClose(tag) {
            this.form.labels.splice(this.form.labels.indexOf(tag), 1);
        },

        getDetails(id) {
            let that = this
            this.$request.get('/creation-collection/get/' + id).then((res) => {
                console.log('res', res)
                that.form = res
                
                // that.optionsList= res.categorys
               
                let load_categorys =  res.categorys
                 

                this.$nextTick(()=>{
                        that.categorysList = res.categorys
                        console.log('that.categorysList',that.categorysList)
                    this.options.forEach((item, index) => {
                    if (load_categorys[0] == item.id) {
                        this.ruleForm.belong = index
                        console.log(this.ruleForm.belong)
                        delete load_categorys[0]
                        return true
                    }
                })
                })
                
                this.$nextTick(()=>{
                    this.options[this.ruleForm.belong].childrens.forEach((item, index) => {
                    item.childrens.forEach((value, key) => {
                        for (let k in load_categorys) {
                            if(parseInt(load_categorys[k])==value.id){
                                this.ruleForm["belong"+index]=value.id;
                                return ;
                            }
                        }
                    })
                })
                })
            
                
            })
        },
        chooseBelong(e) {
          //  this.categorysList[0] =  this.options[e].id
            console.log( this.options[this.ruleForm.belong].id)
            console.log('this.categorysList',this.categorysList)
            console.log('categorys',this.ruleForm)
         },

        chooseFun(e,index){ 
            console.log('categorys',this.ruleForm)
      //  this.categorysList = e
         },


        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        getUserList(user_id) {
            let that = this
            this.$request.get('/user/index', { page: 1, size: 10, id: user_id }).then((res) => {
                console.log(res.items[0], 111)
                this.form.user_id = res.items[0].id
                that.name = res.items[0].name
                // this.init()
            })
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.form.labels.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        getworksList() {
            let that = this
            this.$request.get('/creation-category/index',{type:'create'}).then((res) => {
                this.options = res
                console.log(res, 111)
                // this.init()
            })
        },

        category_idFun(e) {
            this.form.categorys = []
            for (let i = 0; i < e.length; i++) {
                for (let j = 0; j < e[i].length; j++) {
                    if (this.form.categorys.indexOf(e[i][j]) == -1) {
                        this.form.categorys.push(e[i][j])
                    }
                }
            }
            console.log(e)
            console.log(this.form.categorys)
        },


        //提交
        submit() {
            if (this.submitComplete) return
            this.submitComplete = true

            this.form.categorys[0] = this.options[this.ruleForm.belong].id
            this.form.categorys[1] = this.ruleForm.belong0 
            this.form.categorys[2] = this.ruleForm.belong1 
            this.form.categorys[3] = this.ruleForm.belong2 

            this.form.categorys =  this.form.categorys.filter(item => item !== null);
            console.log(' this.form.categorys', this.form)
            if (
                !(
                    this.form.name &&
                    this.form.desc &&
                    this.form.thumbnail &&
                    this.form.episodes &&
                    this.form.actor &&
                    this.form.categorys.length > 0
                )
            ) {
                this.$message({
                    message: "请将信息填写完整！",
                    type: "warning",
                });
                this.submitComplete = false
                return;
            }



            if (this.type == 'create') {
                this.$request.post("/creation-collection/create", this.form).then((res) => {
                    this.$message({
                        message: "添加成功",
                        type: "success",
                    });
                    this.submitComplete = false
                    this.initForm()
                    this.$router.push({ path: "/long-video-list" });
                }).catch((error) => {
                    this.submitComplete = false
                });
            } else {
                this.$request.put("/creation-collection/update/" + this.form.collection_id, this.form).then((res) => {
                    this.$message({
                        message: "修改成功",
                        type: "success",
                    });
                    this.initForm()
                    this.$router.push({ path: "/long-video-list" });
                }).catch((error) => {
                    this.submitComplete = false
                });
            }

        },
    },
};
</script>
    
<style lang="scss" scoped>
.avatar-uploader-icon {
    border: 1px dashed #d9d9d9 !important;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px !important;
    position: relative !important;
    overflow: hidden !important;
}

.avatar-uploader .el-upload:hover {
    border: 1px dashed #d9d9d9 !important;
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 300px;
    height: 178px;
    display: block;
}</style>